import React, { useState } from 'react';
import { Pagination, Input, Message } from '@teamix/ui';
import { Footer } from '@alife/devops-ui';
import './index.scss';
import intl from '../../locale';

export default (props) => {
  const [isInput, setIsInput] = useState(false);
  const { current, onChange } = props;
  const showInput = () => {
    setIsInput(true);
  };
  const onBlur = () => {
    setIsInput(false);
  };
  const onChangePage = (e) => {
    const page = e.target.value || e.currentTarget.value;
    onChange(page, (msg) => {
      setIsInput(false);
      if (msg) {
        Message.warning({
          title: intl.get({
            id: 'code-assets.components.pagination.TheNumberOfInputPages',
            defaultMessage: '输入页数过大，请修改后重试',
          }),
        });
        return true;
      }
    });
  };

  return (
    <Footer className="no-total-pagination">
      <Pagination {...props} />
      <div className="current" onClick={showInput}>
        {isInput ? (
          <Input
            style={{ width: '40px' }}
            autoFocus
            onBlur={onBlur}
            onPressEnter={onChangePage}
            defaultValue={current}
          />
        ) : (
          current
        )}
      </div>
    </Footer>
  );
};
